<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:80%;height:100%;float: left;}
        #list{width: 20%;height: 75%;float: left;margin-top: 10px;}
        #search{width: 20%;height: 25%;float: left;margin-top: 35px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8526cdc9eaa7faa35706d8d0fe54528d"></script>
    <title>圆形区域搜索</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="search">
    检索关键词：<input type="text" id="keyword" />
     <div class="box box-primary">
            <!-- /.box-header -->
            <div class="box-body form-horizontal">
                省市区：
                <select class="form-control" style="width: 100%;" name="province_id" id="province_id">
                      <option selected="selected" value="0">可选择省份</option>
                      <?php foreach ($provinces as $province) : ?>
                        <option value="<?php echo $province->area_id; ?>" ><?php echo $province->area_name; ?></option>
                      <?php endforeach; ?>
                </select>
                <select class="form-control" style="width: 100%;" name="city_id" id="city_id">
                    
                </select>
                <select class="form-control" style="width: 100%;" name="district_id" id="district_id">
                    
                </select>
              </div>
              <!-- /.box-body -->
          </div>
        详&nbsp;细&nbsp;地&nbsp;址：<input type="text" id="adress" /><br />
        <a href="javascript:;" id="sub">地址搜索</a>
        <br />
        经度：<input type="text" id="lat" /><br />
        纬度：<input type="text" id="lng" /><br />
        <a href="javascript:;" id="dosub">经纬度搜索</a>
    </div>
    <div id="list" style="overflow-y:scroll;">

    </div>
    <script src="/assets/js/building/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    
    var lat = '121.48';
    var lng = '31.22';
    var keys = '写字楼';
    initmap(lat,lng,keys);
    function initmap(lat,lng,keys){
        var mPoint = new BMap.Point(lat, lng);  
        map.enableScrollWheelZoom();
        map.centerAndZoom(mPoint,20);
        var marker = new BMap.Marker(mPoint);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        //查找周边
        var circle = new BMap.Circle(mPoint,5000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
        map.addOverlay(circle);
        var local =  new BMap.LocalSearch(
                map,
                {
                    renderOptions: {map: map, panel:"list"},
                    pageCapacity: 50,
                    onSearchComplete: function(results){
                        console.log(results);
                    }
                }
            );  
        local.searchNearby(keys,mPoint,5000);
    }
 
</script>
<script type="text/javascript">
    $("#province_id").on("change", function(e){
        console.log($(this).val());
        var p_id = $(this).val();
        if (p_id > 0) {
            $.ajax({
                method: "GET",
                url: "/Mapsearch/ajax_area_data",
                data: {p_id:p_id}
            }).done(function(data){
                // console.log(data);
                $("#city_id").html(data);
                
            })
        } else {
            $("#city_id").html('<option selected="selected" value="0">可选择</option>');
            city_select2.val(0).trigger("change");
        }
    });

    $("#city_id").on("change", function(e){
        console.log($(this).val());
        var p_id = $(this).val();
        if (p_id > 0) {
            $.ajax({
                method: "GET",
                url: "/Mapsearch/ajax_area_data",
                data: {p_id:p_id}
            }).done(function(data){
                // console.log(data);
                $("#district_id").html(data);
            })
        } else {
            reset_district();
        }
    });
    //填入地址获取经纬度getlocation
    $("#sub").click(function(){
        var province_id = $("#province_id").val();
        if(province_id != 0){
            var province = $("#province_id option:selected").text();
        }else{
            var province = '';
        }
        var city_id = $("#city_id").val();
        if(city_id != 0){
            var city = $("#city_id option:selected").text();
        }else{
            var city = '';
        }
        if(city == '' || undefined){
            if(province == '' || undefined){
                alert("请先选择省市");
                $(this).val("");
                return false;
            }
        }
        var district_id = $("#district_id").val();
        if(district_id != 0){
            var district = $("#district_id option:selected").text();
        }else{
            var district = '';
        }
        var baddress = $("#adress").val();
        var address = province+city+district+baddress;
        var keyword = $("#keyword").val();
        if(keyword == '' || undefined){
            alert("请填写检索关键词");
            return false;
        }
        console.log(address);
        $.ajax({
            url:"/Mapsearch/getLocationNew",
            type:"get",
            data:{'address':address},
            dataType: 'json',
            success: function(data){
                //alert(data.msg);
                if(data.status == '1'){
                    //var map = new BMap.Map("l-map");
                    // alert(data.msg);
                    console.log(data.msg);
                    console.log(data.arr);
                    map.clearOverlays();
                    initmap(data.arr.lng,data.arr.lat,keyword);
                    // $("#lat").val(data.arr.lat);
                    // $("#lng").val(data.arr.lng);
                    
                }else{
                    console.log(data);
                    alert(data.msg);
                }
            }
        });
    });
    $("#dosub").click(function(){
        var lat = $("#lat").val();
        if(lat == '' || undefined){
            alert("请填写经度");
            return false;
        }
        var lng = $("#lng").val();
        if(lng == '' || undefined){
            alert("请填写纬度");
            return false;
        }
        var keyword = $("#keyword").val();
        if(keyword == '' || undefined){
            alert("请填写检索关键词");
            return false;
        }
        map.clearOverlays();
        initmap(lat,lng,keyword);
    });
    function reset_district() {
        $("#district_id").html('<option selected="selected" value="0">可选择</option>');
    }
</script>
</body>
</html>